<template>
  <div class="table-box">
    <ProTable
      ref="proTable"
      title="文章标签"
      :columns="columns"
      :request-api="getTableList"
      :init-param="initParam"
      :pagination="true"
    >
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button type="primary" :icon="CirclePlus" @click="creteTag()">新增标签</el-button>
      </template>
      <!-- 表格操作 -->
      <template #operation="{ row }">
        <el-button type="primary" link @click="editTag('查看', row)" :icon="EditPen">编辑</el-button>
        <el-button type="primary" link @click="delTag(row.id, row.tag_name)" :icon="Delete">删除</el-button>
      </template>
    </ProTable>
    <AddTagDialog ref="addTagRef"></AddTagDialog>
  </div>
</template>

<script setup lang="tsx" name="useProTable">
import { Article } from "@/api/interface";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { getTagListApi, delTagApi } from "@/api/modules/article";
import { useHandleData } from "@/hooks/useHandleData";
import AddTagDialog from "./components/AddTagDialog.vue";
import { CirclePlus, Delete, EditPen, Download, Upload, View, Document } from "@element-plus/icons-vue";
import { useRoute, useRouter } from "vue-router";
import { ref, reactive } from "vue";
const proTable = ref<ProTableInstance>();
const initParam = reactive({});
const route = useRoute();
const router = useRouter();
const getTableList = (params: any) => {
  return getTagListApi(params);
};

const addTagRef = ref<InstanceType<typeof AddTagDialog> | null>(null);

// 表格配置项
const columns: ColumnProps<Article.ResArticleList>[] = [
  { type: "selection", fixed: "left", width: 80 },
  {
    prop: "tag_name",
    label: "标签名称",
    search: { el: "input" },
    // width: 180,
    render: scope => {
      return <span>{scope.row.tag_name || "--"}</span>;
    }
  },
  { prop: "operation", label: "操作", fixed: "right", width: 220 }
];

const creteTag = () => {
  addTagRef.value?.openDialog("add", proTable.value?.getTableList);
};

const editTag = (title: string, row: Partial<Article.ResArticleList> = {}) => {
  addTagRef.value?.openDialog("edit", proTable.value?.getTableList, row);
};

const delTag = async (id: number, title: string) => {
  await useHandleData(delTagApi, { id }, `删除标签【${title}】这个标签`);
  proTable.value?.clearSelection();
  proTable.value?.getTableList();
};
</script>

<style scoped lang="scss">
:deep(.el-upload) {
  display: inline-block;
}
.up-btn {
  display: inline-block;
  margin: 0 10px;
}
</style>
